<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <style>
        .tree-txt-active{
            color:red;
            font-weight: bold;
        }
    </style>
</head>
<body>



<div class="layui-fluid" id="div4Add"  hidden >

    <div class="layui-card">
        <div class="layui-card-header">添加商品</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" id="form1">
                <div class="layui-form-item">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name"  placeholder="请输入名称"   lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input type="text" name="price"   placeholder="请输入价格"  lay-verify="required|number" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="goback">返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div >


<div class="layui-fluid"  id="divMain" >
    <div class="layui-row">
        <div class="layui-col-xs3 layui-col-md3 layui-col-lg3">
             <div class="layui-card">
                 <div class="layui-card-header">商品分类</div>
                 <div class="layui-card-body">
                     <div id="tree1"></div>
                 </div>
             </div>
        </div>
        <div class="layui-col-xs9 layui-col-md9 layui-col-lg9">
            <div class="layui-card">
                <div class="layui-card-header">商品列表展示</div>
                <div class="layui-card-body">
                    <table class="layui-table" id="table1" lay-filter="test"></table>
                    <!--  lay-filter 相当于layui的专用id-->
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="batchDelete">批量删除</button>
    </div>
</script>

<script type="text/html" id="tool1">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>更改</button>

        <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-primary layui-border-red" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
</script>






</body>
</html>
<script src="/layuiadmin/layui/layui.js"></script>
<script>




    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table',"tree","jquery","layer","form"], function(){
        var table = layui.table;
        var tree = layui.tree;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var currentCategroyId;
        var currentCategroyName;
        var table1;

       // $("#hehe").html("666666");
        //加载左边树

        $(document).click(function(e) { // 在页面任意位置点击而触发此事件
            if($(e.target).attr('class') === "layui-tree-txt"){ // 防止因为点击展开按钮把已选中的样式取消
                $(".layui-tree-txt").removeClass("tree-txt-active"); // 移除点击样式
                $(e.target).addClass("tree-txt-active"); // e.target表示被点击的目标
            }
        });

        $.ajax({
            type: "POST",
            url: "/getcategorys",
            data: {},
            success: function(data){
                tree.render({
                    elem: '#tree1'
                    ,data: data,
                    click: function(obj){
                        currentCategroyId = obj.data.id;
                        currentCategroyName = obj.data.title;
                        if(!table1){
                            initTable();
                        }else{
                            table1.reload({
                                where:{
                                    id:currentCategroyId
                                }
                            });
                        }


                    }
                });
            },
            dataType:"json"
        });



        //展示已知数据
        function initTable(){
            table1 =  table.render({
                elem: '#table1'
                ,cols: [
                    [ //标题栏
                        {type: 'checkbox'},
                        {field: 'id', title: 'ID', width: 80, sort: true}
                        ,{field: 'name', title: '书名', minWidth: 150}
                        ,{field: 'price', title: '价格', width: 100}
                        ,{ field: 'id',title: '操作',toolbar:"#tool1"}
                    ] ]
                ,url:"/getadmins"
                ,page:true
                ,request: {
                    pageName: 'pageNo'
                    ,limitName: 'pageSize'
                }
                ,toolbar:"#toolbarDemo"
                ,defaultToolbar:["filter"]

            });
        }

        initTable();
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    if(!currentCategroyId){
                        layer.msg('请在左边选择类别');
                        return;
                    }else{

                        layer.confirm('确定类别?【'+currentCategroyName+" 】", {icon: 3, title:''}, function(index){
                            $("#div4Add").show();
                            $("#divMain").hide();
                            $("#form1")[0].reset();//reset 原生js 方法


                            layer.close(index);
                        });


                    }

                    break;
                case 'batchDelete':
                   var data = checkStatus.data;

                   if(data.length<=0){
                        layer.msg('未选中记录');
                        return;
                    }else{

                       layer.confirm('确认要删除吗', {icon: 3, title:''}, function(index){
                              var idTxt="";
                              var data = checkStatus.data;
                              $.each(data,function (i,d) {
                                  idTxt = idTxt+"id="+d.id+"&";
                              });
                              $.ajax({
                                  type: "POST",
                                  url: "/goods_delte",
                                  data:idTxt,
                                  success: function(data){
                                      if(data.success){
                                          layer.msg("操作成功",{time:700},function () {
                                              table1.reload();
                                          });
                                      }
                                  },
                                  dataType:"json"
                              });

                            layer.close(index);
                        });

                    }

                    break;
            };
        });



        table.on('tool(test)', function(obj){
            var data = obj.data
            switch(obj.event){
                case 'edit':
                    break;
                case 'delete':
                    layer.confirm('确认要删除 【'+data.name+ '】 吗', {icon: 3, title: ''}, function (index) {

                        $.ajax({
                            type: "POST",
                            url: "/goods_delte",
                            data: "id="+data.id,
                            success: function (data) {
                                if (data.success) {
                                    layer.msg("操作成功", {time: 700}, function () {
                                        table1.reload();
                                    });
                                }
                            },
                            dataType: "json"
                        });

                        layer.close(index);
                    });


                    break;
            };
        });





       $("#goback").click(function () {
           $("#div4Add").hide();
           $("#divMain").show();
       });

        //监听提交
        form.on('submit(formDemo)', function(data){

            data.field.categoryId= currentCategroyId;
            $.ajax({
                type: "POST",
                url: "/addGoods",
                data: data.field,
                success: function (data) {
                    if (data.success) {
                        layer.msg("操作成功", {time: 700}, function () {
                            $("#div4Add").hide();
                            $("#divMain").show();
                            table1.reload();
                        });
                    }
                },
                dataType: "json"
            });

            return false;
        });

    });

</script>



</body>
</html>
